<template>
    <el-drawer v-model="props.serialVisible" size="1020" :before-close="handleClose">
        <template #header>
            <h4>串口配置</h4>
        </template>
        <template #default>
            <div class="serial-form">
                <el-form :model="form" :rules="formRules" ref="formRef" label-width="130px">
                    <el-card class="box-card" shadow="never">
                        <template #header>
                            基本信息
                        </template>
                        <div class="text">
                            <el-row :gutter="20">
                                <el-col :span="12">
                                    <el-form-item label="端口名称" prop="portName">
                                        <el-input v-model="form.portName"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="端口类型" prop="portType">
                                        <el-select v-model="form.portType" style="width: 100%;">
                                            <el-option label="RS485" value="RS485"></el-option>
                                            <el-option label="RS232" value="RS232"></el-option>
                                            <el-option label="TCP" value="TCP"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="协议类型" prop="protocolType">
                                        <el-select v-model="form.protocolType" style="width: 100%;">
                                            <el-option label="Modbus TCP" value="Modbus TCP"></el-option>
                                            <el-option label="Modbus RTU" value="Modbus RTU"></el-option>
                                            <el-option label="YBN" value="YBN"></el-option>
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="是否开启透传" prop="isTransparent">
                                        <el-radio-group v-model="form.isTransparent">
                                            <el-radio label="是"></el-radio>
                                            <el-radio label="否"></el-radio>
                                        </el-radio-group>
                                    </el-form-item>

                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                    <el-card class="box-card mt10" shadow="never">
                        <template #header>
                            通讯设置
                        </template>
                        <el-row :gutter="20">
                            <el-col :span="12">
                                <el-form-item label="波特率" prop="baudRate">
                                    <el-select v-model="form.baudRate" style="width: 100%;">
                                        <el-option label="110" value="110"></el-option>
                                        <el-option label="300" value="300"></el-option>
                                        <el-option label="600" value="600"></el-option>
                                        <el-option label="1200" value="1200"></el-option>
                                        <el-option label="2400" value="2400"></el-option>
                                        <el-option label="4800" value="4800"></el-option>
                                        <el-option label="9600" value="9600"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="数据长度" prop="dataLength">
                                    <el-select v-model="form.dataLength" style="width: 100%;">
                                        <el-option label="5" value="5"></el-option>
                                        <el-option label="6" value="6"></el-option>
                                        <el-option label="7" value="7"></el-option>
                                        <el-option label="8" value="8"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="校验" prop="parity">
                                    <el-select v-model="form.parity" style="width: 100%;">
                                        <el-option label="无" value="none"></el-option>
                                        <el-option label="奇校验" value="odd"></el-option>
                                        <el-option label="偶校验" value="even"></el-option>
                                        <el-option label="标记校验" value="mark"></el-option>
                                        <el-option label="空格校验" value="space"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="停止位" prop="stopBits">
                                    <el-select v-model="form.stopBits" style="width: 100%;">
                                        <el-option label="1" value="1"></el-option>
                                        <el-option label="1.5" value="1.5"></el-option>
                                        <el-option label="2" value="2"></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <!-- <el-col :span="12">
                                <el-form-item label="目标IP" prop="targetIp">
                                    <el-input v-model="form.targetIp"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="目标端口" prop="targetPort">
                                    <el-input v-model="form.targetPort"></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="通信超时（ms）" prop="timeout">
                                    <el-input v-model.number="form.timeout"></el-input>
                                </el-form-item>
                            </el-col> -->
                        </el-row>
                    </el-card>
                </el-form>
            </div>

        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="submitForm(formRef)">保 存</el-button>
                <el-button @click="handleClose"> 取 消</el-button>
            </div>
        </template>

    </el-drawer>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus'
// 定义接收的属性类型
const props = defineProps({
    serialVisible: {
        type: Boolean,
        required: true
    }
});
// 定义自定义事件类型
const emits = defineEmits(['closeSerial']);
const handleClose = () => {
    emits('closeSerial', false)
    console.log('emitsemits')
}

interface Form {
    portName: string;
    portType: string;
    protocolType: string;
    isTransparent: string;
    baudRate: string;
    dataLength: string;
    parity: string;
    stopBits: string;
    targetIp: string;
    targetPort: string;
    timeout: number;
}
const form = ref<Form>({
    portName: 'COM1',
    portType: 'RS485',
    protocolType: 'Modbus TCP',
    isTransparent: '是',
    baudRate: '1200',
    dataLength: '5',
    parity: 'odd',
    stopBits: '1',
    targetIp: '',
    targetPort: '',
    timeout: 0,
});

const formRules = reactive<FormRules<Form>>({
    portName: [{ required: true, message: '请输入端口名称', trigger: 'blur' }],
    portType: [{ required: true, message: '请选择端口类型', trigger: 'change' }],
    protocolType: [{ required: true, message: '请选择协议类型', trigger: 'change' }],
    isTransparent: [{ required: true, message: '请选择是否开启透传', trigger: 'change' }],
    baudRate: [{ required: true, message: '请选择波特率', trigger: 'change' }],
    dataLength: [{ required: true, message: '请选择数据长度', trigger: 'change' }],
    parity: [{ required: true, message: '请选择校验', trigger: 'change' }],
    stopBits: [{ required: true, message: '请选择停止位', trigger: 'change' }],
    targetIp: [
        { required: true, message: '请输入目标IP', trigger: 'blur' },
        { pattern: /^(\d{1,3}\.){3}\d{1,3}$/, message: '请输入正确的IP地址', trigger: 'blur' },
    ],
    targetPort: [{ required: true, message: '请输入目标端口', trigger: 'blur' }],
    timeout: [
        { required: true, message: '请输入通信超时', trigger: 'blur' },
        { pattern: /^[0-9]+$/, message: '通信超时必须为数字', trigger: 'blur' },
    ],
})

const formRef = ref<FormInstance>()
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
        } else {
            console.log('error submit!', fields)
        }
    })
}

</script>


<style lang="scss"></style>